<template>
    <div class="goodBox">

        <div class="goodlist" v-for="item in odata">
          <router-link tag="div" :to="'/article/'+item.id" class="goodwarp" @click.native="openArticle">
            <img src="./img/2@2x.png">
            <div class="bookBox">
                <p>书名：{{item.title}}</p>
                <p>作者：林碗底</p>
                <p>SBN:197512</p>
                <p>出版社：中国四川文艺出版社{{item.id}}</p>
                <p>价格：￥75</p>
            </div>
            <i class="goodicon"></i>
          </router-link>
        </div>

    </div>
</template>

<script>
import axios from "axios"

export default{
    data(){
        return {
            odata:[]
        }
    },
    methods:{
      openArticle:function (){
        this.$store.dispatch('openShow','bookArticle')
      }
    },
    created(){
        var _this=this;
        axios.get('/api/title', {
          })
          .then(function (response) {
            _this.odata=response.data.data;
          })
          .catch(function (error) {
            console.log(error);
          });
    }
}
</script>

<style lang="Sass">
    .goodBox{ width: 100%; height: 100%;  background: #eee; margin-top: 2.5rem; margin-bottom: 3rem; overflow: auto;

      .goodlist{  background: #fff; padding-top: .5rem;  height:7rem; position: relative; border-bottom: .05rem solid #e8e8e8;
          .goodwarp{width: 100%; display: flex;}
          .goodicon{ position: absolute; right: .6rem; top: 3.75rem; width: 0.35rem; height: .6rem; background: url('./img/icon_retern2@2x.png') no-repeat; background-size: 100% 100%;  }
          img{display: inline-block; flex:0 0 4.625rem; margin-left:.6rem;  width:4.625;  height:6.5rem;  }
          .bookBox{flex:1;

            p{font-size: .65rem; line-height: .65rem;  margin: .8rem 0 0 0; padding: 0 0 0 0.6rem; color: #666; }
            p:first-child{ margin: 0 0 0 0; }
          }
        }
    }
</style>